<template>
  <div class="login">
    <div class="form">
      <div class="title">
        智慧点餐平台
      </div>

      <el-form :model="formDate" :rules="rules" ref="formRef">
        <!-- 账号输入框 -->
        <el-form-item prop="account">
          <el-input v-model="formDate.account" placeholder="请输入账号">
            <template #prefix>
              <el-icon class="el-input__icon">
                <UserFilled color="#fff" />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item prop="password">
          <el-input v-model="formDate.password" show-password placeholder="请输入密码">
            <template #prefix>
              <el-icon class="el-input__icon">
                <Lock color="#fff" />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 单击登录按钮 -->
        <el-form-item>
          <el-button type="primary" style="width:100%" @click="login">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { UserFilled, Lock } from '@element-plus/icons-vue';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { checkLogin } from '@/views/api/account.js';
import { ElMessage } from 'element-plus';
import { useStore } from '@/stores/userStore';

const router = useRouter();
const store = useStore();

// 账号登录数据
const formDate = reactive({
  account: '',
  password: ''
});

const formRef = ref(null);

// 触发的校验事件函数
const validateAccount = (rule, value, callback) => {
  let reg = /^([a-z]|[0-9]){4,11}$/;
  if (reg.test(value)) {
    callback();
  } else {
    callback(new Error('请输入正确的账号'));
  }
};

const validatePassword = (rule, value, callback) => {
  let reg = /^([a-z]|[0-9]){4,11}$/;
  if (reg.test(value)) {
    callback();
  } else {
    callback(new Error('请输入正确的密码'));
  }
};

// 校验规则
const rules = reactive({
  account: [
    { required: true, message: '账号不能为空', trigger: 'blur' },
    { validator: validateAccount, trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { validator: validatePassword, trigger: 'blur' }
  ]
});

// 登录方法
const login = async () => {
  if (!formRef.value) {
    ElMessage.error('表单实例未初始化');
    return;
  }

  formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        let { code, msg, id, role, token } = await checkLogin(formDate);
        if (code === 0) {
          sessionStorage.setItem('user', JSON.stringify({ id, role, token }));
          ElMessage.success(msg);
          router.push('/home');
        } else {
          ElMessage.error(msg);
        }
      } catch (error) {
        ElMessage.error('登录失败，请稍后重试');
      }
    } else {
      ElMessage.error('表单信息填写有误');
    }
  });
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  width: 100%;
  background-color: #2d3a4b;
}

.form {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title {
  width: 100%;
  height: 50px;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
}

:deep(.el-input__inner) {
  color: #fff;
}

.el-form-item {
  margin-bottom: 33px;
}
</style>